import React, {useCallback} from "react";
import {Upload, UploadFile, UploadProps} from "antd";
import {RcFile} from "antd/es/upload";
import {PlusOutlined} from "@ant-design/icons";
import {debounce} from "lodash-es";

export type RcFileWithUrl = UploadFile<{url: string}>;

type Props = {
  onChange: (file: RcFile[]) => void;
};

export function ImageUpload(props: Props) {

  const onChange = useCallback(debounce((list)=>{
    props.onChange(list.fileList.map((item:UploadFile)=>item.originFileObj));
  }, 600), [props]);

  const uploadProps: UploadProps = {
    beforeUpload: () => false,
    listType: "picture-card",
    accept: 'image/*',
    onChange,
  };

  return (
    <Upload {...uploadProps} multiple>
      <button style={{border: 0, background: 'none'}} type="button">
        <PlusOutlined/>
        <div style={{marginTop: 8}}>Upload</div>
      </button>
    </Upload>
  )
}